
<template>
  <div>
      <div>
        <input @keyup.enter="handleClick" type="text" v-model="mytodo">
        <button @click="handleClick">添加</button>
        <button @click='clean'>清空</button>
      </div>
      <ul>
        <li :class="{'done':todo.done}" @click="toggle(index)" :key="index" v-for='(todo,index) in todos'>{{index+1}}:{{todo.text}}</li>
      </ul>
      <p>{{remain}}/{{todos.length}}</p>
  </div>

</template>

<script>

export default{
  data () {
    return {
      title: 'hello vuejs',
      subtitle: 'Vue React Angular is good',
      mytodo: '',
      todos: [
        {text: '吃饭', done: false},
        {text: '睡觉', done: false},
        {text: '写代码', done: false}
      ]
    }
  },
  computed: {
    remain () {
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    handleClick () {
      this.todos.push({
        text: this.mytodo,
        done: false
      })
      this.mytodo = ''
    },
    toggle (i) {
      this.todos[i].done = !this.todos[i].done
    },
    clean () {
      this.todos = this.todos.filter(v => !v.done)
    }
  }

}
</script>

<style>

  li.done{
    text-decoration: line-through;
    color:'red'
  }

</style>
